﻿<AntTitle level="1">Radio</AntTitle>
<AntText>Radio.</AntText>
<AntTitle level="2">When to use</AntTitle>
<AntParagraph>
    <ul>
        <li>Used to select a single state from multiple options.</li>
        <li>The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.</li>
    </ul>
</AntParagraph>
<br />
<h2>Examples</h2>
<br />
<DemoCard>
    <Title>Basic</Title>
    <Description>The simplest use.</Description>
    <Demo>
        <AntRadio>Radio</AntRadio>
    </Demo>
</DemoCard>
<br />

<DemoCard>
    <Title>disabled</Title>
    <Description>Radio unavailable.</Description>
    <Demo>
        <AntRadio checked disabled="@disabled">
            Disabled
        </AntRadio>
        <br />
        <AntRadio disabled="@disabled">
            Disabled
        </AntRadio>
        <div style="margin-top: 20px">
            <AntButton type="primary" onclick="_=>disabled=!disabled">Toggle disabled</AntButton>
        </div>
    </Demo>
</DemoCard>

@code
    {
    bool disabled = true;
}
<DemoCard>
    <Title>Radio Group</Title>
    <Description>A group of radio components.</Description>
    <Demo>
        <AntRadioGroup @bind-Value="@_value">
            <AntRadio Value="1">A</AntRadio>
            <AntRadio Value="2">B</AntRadio>
            <AntRadio Value="3">C</AntRadio>
            <AntRadio Value="4">D</AntRadio>
        </AntRadioGroup>
    </Demo>
</DemoCard>

@code
    {
    void onChange(string value)
    {

    }

    string _value = "1";
}

<DemoCard>
    <Title>Vertical Radio.Group</Title>
    <Description>Vertical Radio.Group, with more radios.</Description>
    <Demo>
        <AntRadioGroup @bind-Value="@radioValue">
            <AntRadio Style="@style" Value="A">Option A</AntRadio>
            <AntRadio Style="@style" Value="B">Option B</AntRadio>
            <AntRadio Style="@style" Value="C">Option C</AntRadio>
            <AntRadio Style="@style" Value="M">
                More...
                @if (radioValue == "M")
                {
                    <AntInput type="text" />
                }
            </AntRadio>
        </AntRadioGroup>
    </Demo>
</DemoCard>

@code
    {
    string radioValue = "A";
    string style = "display: block;height:30px;line-height:30px";
}

<DemoCard>
    <Title>RadioGroup with name</Title>
    <Description>
        Passing the `nzName` property to all `input[type="radio"]` that are in the same RadioGroup. It is usually used to let the browser see your `nz-radio-group` as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same `nz-radio-group`.
    </Description>
    <Demo>
        <AntRadioGroup @bind-Value="radioValue2" Name="radiogroup">
            <AntRadio Value="A">A</AntRadio>
            <AntRadio Value="B">B</AntRadio>
            <AntRadio Value="C">C</AntRadio>
            <AntRadio Value="D">D</AntRadio>
        </AntRadioGroup>
    </Demo>
</DemoCard>

@code
    {
    string radioValue2 = "A";
}

<DemoCard>
    <Title>Radio Style</Title>
    <Description>
        The combination of radio button style.
    </Description>
    <Demo>
        <AntRadioGroup @bind-Value="radioValue3">
            <AntRadio RadioButton Value="A">Hangzhou</AntRadio>
            <AntRadio RadioButton Value="B">Shanghai</AntRadio>
            <AntRadio RadioButton Value="C">Beijing</AntRadio>
            <AntRadio RadioButton Value="D">Chengdu</AntRadio>
        </AntRadioGroup>
        <br />
        <br />
        <AntRadioGroup @bind-Value="radioValue3">
            <AntRadio RadioButton Value="A">Hangzhou</AntRadio>
            <AntRadio RadioButton Value="B" disabled>Shanghai</AntRadio>
            <AntRadio RadioButton Value="C">Beijing</AntRadio>
            <AntRadio RadioButton Value="D">Chengdu</AntRadio>
        </AntRadioGroup>
        <br />
        <br />
        <AntRadioGroup @bind-Value="radioValue3">
            <AntRadio RadioButton Value="A" disabled>Hangzhou</AntRadio>
            <AntRadio RadioButton Value="B" disabled>Shanghai</AntRadio>
            <AntRadio RadioButton Value="C" disabled>Beijing</AntRadio>
            <AntRadio RadioButton Value="D" disabled>Chengdu</AntRadio>
        </AntRadioGroup>
    </Demo>
</DemoCard>
@code
{
    string radioValue3 = "A";
}

<DemoCard>
    <Title>Solid radio button</Title>
    <Description>
        Solid radio button style.
    </Description>
    <Demo>
        <AntRadioGroup @bind-Value="radioValue4" ButtonStyle="solid">
            <AntRadio RadioButton Value="A">Hangzhou</AntRadio>
            <AntRadio RadioButton Value="B">Shanghai</AntRadio>
            <AntRadio RadioButton Value="C">Beijing</AntRadio>
            <AntRadio RadioButton Value="D">Chengdu</AntRadio>
        </AntRadioGroup>
    </Demo>
</DemoCard>
@code
{
    string radioValue4 = "A";
}

<DemoCard>
    <Title>Size</Title>
    <Description>
        There are three sizes available: large, medium, and small. It can coordinate with input box.
    </Description>
    <Demo>
        <AntRadioGroup @bind-Value="radioValue5" Size="large">
            <AntRadio RadioButton Value="A">Hangzhou</AntRadio>
            <AntRadio RadioButton Value="B">Shanghai</AntRadio>
            <AntRadio RadioButton Value="C">Beijing</AntRadio>
            <AntRadio RadioButton Value="D">Chengdu</AntRadio>
        </AntRadioGroup>
        <br />
        <br />
        <AntRadioGroup @bind-Value="radioValue5">
            <AntRadio RadioButton Value="A">Hangzhou</AntRadio>
            <AntRadio RadioButton Value="B">Shanghai</AntRadio>
            <AntRadio RadioButton Value="C">Beijing</AntRadio>
            <AntRadio RadioButton Value="D">Chengdu</AntRadio>
        </AntRadioGroup>
        <br />
        <br />
        <AntRadioGroup @bind-Value="radioValue5" Size="small">
            <AntRadio RadioButton Value="A">Hangzhou</AntRadio>
            <AntRadio RadioButton Value="B">Shanghai</AntRadio>
            <AntRadio RadioButton Value="C">Beijing</AntRadio>
            <AntRadio RadioButton Value="D">Chengdu</AntRadio>
        </AntRadioGroup>
    </Demo>
</DemoCard>
@code
{
    string radioValue5 = "A";
}